<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div{width: 50px; height: 50px; border-radius: 50%; position: absolute;}
			#div1{left: 100px; top: 300px; background-color: red}
			#div2{left: 600px; top: 200px; background-color: blue}
			#div3 div{width: 5px; height: 5px; background-color: black; position: absolute;border-radius: 50%}
		</style>
		<script src = 'jquery-1.10.1.min.js'></script>
		<script src = 'parabola.js'></script>
		<script>
			/*
				parabola.js 抛物线函数

			 */
			window.onload = function(){
				var oDiv1 = document.querySelector("#div1");
				var oDiv2 = document.querySelector("#div2");
				var oDiv3 = document.querySelector("#div3");
				var aBtns = document.querySelectorAll("button");



				/*
					想要让div1进行抛物线方程
					1、创建一个抛物线对象
					2、参数：抛物线运动一些配置选项
						详情：见图1
					3、调用抛物线对象的方法，控制抛物线运动
						详情：见图2

					【注】要求大家实现一个简易的抛物线运动。
						分成水平方向X， 和垂直方向Y两个速度。
						speedX 肯定是匀速运动
						speedY 先减速到0，0加速到原速度
				 */
				var bool = new Parabola({
					el: "#div1",
					targetEl: "#div2",
					duration: 1000,
					curvature: 0.005,
					callback: function(){
						alert("动画执行完毕");
					},
					stepCallback: function(){
						var node = document.createElement("div");
						node.style.left = oDiv1.offsetLeft + 'px';
						node.style.top = oDiv1.offsetTop + 'px';
						oDiv3.appendChild(node);
					},
					// autostart: true
				});

				aBtns[0].onclick = function(){
					bool.start();
				}
				aBtns[1].onclick = function(){
					bool.stop();
				}
				aBtns[2].onclick = function(){
					bool.reset();
				}
				aBtns[3].onclick = function(){
					bool.setOptions({
						targetEl: null,
						offset: [500, 200]
					})
				}

			}
		</script>
	</head>
	<body>
		<button>开始</button>
		<button>暂停</button>
		<button>重置</button>
		<button>设置参数</button>
		<div id = 'div1'></div>
		<div id = 'div2'></div>
		<div id = 'div3'></div>
		
	</body>
</html>



